import { Token as RBTToken } from 'react-bootstrap-typeahead';
import { useDragLayer } from 'react-dnd';

export function DragPreview() {
  const {
    isDragging, itemType, item, currentOffset,
  } = useDragLayer((monitor) => {
    return ({
      item: monitor.getItem(),
      itemType: monitor.getItemType(),
      isDragging: monitor.isDragging(),
      initialOffset: monitor.getInitialSourceClientOffset(),
      currentOffset: monitor.getClientOffset(),
    });
  });

  if (!isDragging || itemType !== 'TOKEN') return null;
  const style = {
    transform: `translate(${currentOffset.x - 20}px, ${currentOffset.y - 13}px)`,
    position: 'fixed',
    top: 0,
    left: 0,
    zIndex: 1000,
    pointerEvents: 'none',
  };
  return <span style={style}><RBTToken {...item.props} /></span>;
}
